<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<%pageContext.setAttribute("APP_PATH",request.getContextPath()); %>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ssm_page</title>
<link href="${APP_PATH}/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/js/jquery.min.js"></script>
<script src="${APP_PATH}/js/bootstrap.min.js"></script>
<script type="text/javascript">
var totalRecord,currentPage;
//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
$(function(){
	//去首页
	to_page(1);
});

function to_page(pn){
	$.ajax({
		url:"${APP_PATH}/emps",
		data:"pn="+pn,
		type:"GET",
		success:function(result){
			console.log(result);
			//1、解析并显示员工数据
			build_emps_table(result);
			//2、解析并显示分页信息
			build_page_info(result);
			//3、解析显示分页条数据
			build_page_nav(result);
		}
		});
}
//表格数据显示
function build_emps_table(result)
{
	$("#showEmployee").empty();
	var emps = result.extend.pageInfo.list;
	$.each(emps,function(index,item){
		var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
		var empId=$("<td></td>").append(item.empId);
		var empName=$("<td></td>").append(item.empName);
		var email=$("<td></td>").append(item.email);
		var gender=$("<td></td>").append(item.gender=='M'?'男':'女');
		var deptName=$("<td></td>").append(item.department.deptName);
		//編輯按钮
		var editbtn=$("<button></button>").addClass("btn btn-info btn-default btn-sm")
		.append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("編輯"));
		//修改员工信息
		editbtn.click(function(){
			editEmployee(item.empName,item.email,item.gender,item.department);
		})
		//删除按钮
		var deletebtn=$("<button></button>").addClass("btn btn-danger btn-default btn-sm")
		.append($("<span></span>").addClass("glyphicon glyphicon-trash").append("刪除"));
		//点击删除按钮触发的事件
		deletebtn.click(function(){
			delEmployeeWithId(item.empId,result.extend.pageInfo.pageNum);
		})
		var btnTd=$("<td></td>").append(editbtn).append(" ").append(deletebtn);
		$("<tr></tr>")
		.append(checkBoxTd)
		.append(empId)
		.append(empName)
		.append(email)
		.append(gender)
		.append(deptName)
		.append(btnTd)
		.appendTo("#showEmployee");
	});
	}

//记录数显示
function build_page_info(result)
{
	$("#Info").empty();
	var emps = result.extend.pageInfo
	$("<p></p>").append("当前第"+emps.pageNum+"页、共有"+emps.pages+"页、总计有"+emps.total+"记录").appendTo("#Info");	
	}

//分页条
function build_page_nav(result)
{
	//清空分頁条信息
	$("#liEmployee").empty();
	//后台返回的连续页码
	var arrs = result.extend.pageInfo.navigatepageNums
	var one=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
	//点击首页触发的事件
	one.click(function(){
		to_page(1);
	})
	var two=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
	//点击上一页符时触发的事件
	two.click(function(){
		if(result.extend.pageInfo.hasPreviousPage==true)
			{
				to_page(result.extend.pageInfo.prePage);
			}
	})
	var employeePage=$("#liEmployee").append(one).append(two);
	//连续显示的页码
	$.each(arrs,function(index,item){
		var tree=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
		if(item==result.extend.pageInfo.pageNum)
			{
				tree.addClass("active");
			}
		//点击页码时触发该事件
		tree.click(function(){
			to_page(item);
		});
		employeePage.append(tree)
	});
	var eight=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
	//点击下一页符时触发的事件
	eight.click(function(){
		if(result.extend.pageInfo.hasNextPage==true)
			{
				to_page(result.extend.pageInfo.nextPage);
			}
	})
	var nine=$("<li></li>").append($("<a></a>").append("尾页").attr("href","#"));
	//点击尾页触发的事件
	nine.click(function(){
		to_page(result.extend.pageInfo.pages);
	})
	employeePage.append(eight).append(nine);
	}
	
	
//添加员工事件
function addEmployee()
{
	name=$("#exampleInputlastName").val();
	Email1=$("#exampleInputEmail1").val();
	gender=$("#exampleInputgender").val();
	d_id=$("#exampleInputd_id").val();
	var args = {
			"name" : name,
			"Email1" : Email1,
			"gender" : gender,
			"d_id" : d_id
		};// 待发送 Key/value 参数
	$.ajax({
		url:"${APP_PATH}/addEmps",
		data:args,
		type:"POST",
		success:function(result){
			if(result=="success")
				alert("添加成功")
		}});
	}

//根据员工id来删除员工信息
function delEmployeeWithId(empId,pnNum){
	$.ajax({
		url:"${APP_PATH}/delEmps",
		data:"empId="+empId,
		type:"GET",
		success:function(result){
			if(result=="success")
				{
					alert("删除成功");
					to_page(pnNum);
				}				
		}
		});
}
</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1>SSM_PAGE</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4 col-md-offset-10">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" >新增</button>
				<button type="button" class="btn btn-danger" id="deleteEmployee">删除</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table table-striped">
					<tr>
						<th>
							<input type="checkbox" id="check_all"/>
						</th>
						<th>#</th>
						<th>lastName</th>
						<th>email</th>
						<th>gender</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>										
					<tbody id="showEmployee"></tbody>
				</table>
			</div>

		</div>
		<div class="row">
			<div class="col-md-6" id="Info"></div>
			<div class="col-md-6">
				<nav aria-label="Page navigation">
				<ul class="pagination" id="liEmployee">
				</ul>
				</nav>
			</div>
		</div>
	</div>
	
	
<!-- 	新增的模态框 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">请输入员工信息</h4>
	      </div>
	      <div class="modal-body">
		      <form>
				  <div class="form-group">
				    <label for="exampleInputPassword1">lastName</label>
				    <input type="text" class="form-control" id="exampleInputlastName" placeholder="lastName" required="required">
				  </div>
				   <div class="form-group">
				    <label for="exampleInputEmail1">Email address</label>
				    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required="required">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputPassword1">gender</label>
				    <input type="text" class="form-control" id="exampleInputgender" placeholder="gender" required="required">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputPassword1">d_id</label>
				    <input type="text" class="form-control" id="exampleInputd_id" placeholder="d_id" required="required">
				  </div>				  			  			 
				  <button type="button"  class="btn btn-danger" onclick="addEmployee()">提交</button>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
</body>
</html>